<template>
    <div class="select-scene">
        <el-dialog v-dialog-drag :visible.sync="show" top="10px" :title="title" :close-on-click-modal="false"
            :append-to-body="true" :before-close="closeDialog">
            <div class="search-box">
                <div class="search-form">
                    <el-input placeholder="请输入商品名称" v-model="ruleForm.nameLike">
                        <template slot="append">
                            <el-button @click="clickQuery">搜索</el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="table-box">
                <el-table :height="400" v-loading="loading" :data="tableData.columnData">
                    <el-table-column label="商品名称" prop="name" key="name" width="200" align='left'></el-table-column>
                    <el-table-column label="品牌名称" prop="brandName" key="brandName" width="200" align='left'>
                    </el-table-column>
                    <el-table-column label="商品价格" prop="marketPrice" key="marketPrice" align='center'>
                    </el-table-column>
                    <el-table-column label="库存" prop="storeNums" key="storeNums" align='center'>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100">
                        <template slot-scope="scope">
                            <el-button @click="selectThis(scope.row)" v-if="!scope.row.choosed">选 择</el-button>
                            <el-button type="danger" @click="unselectThis(scope.row)" v-else>已选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <section class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize" layout="sizes,total,prev,pager,next"
                    :current-change.sync="tableData.currentPage" :current-page.sync="tableData.currentPage"
                    :total="tableData.total">
                </el-pagination>
            </section>
            <div slot="footer">
                <el-button type="primary" @click="submitchoosed">确定</el-button>
                <el-button @click="closeDialog">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        querygdProductList,
    } from "@/pages/tene/busi/product/service/productService";
    import {
        mapState
    } from 'vuex';
    import {
        isArray
    } from '@/utils/Tools';
    export default {
        name: '', // 场景选择组件（弹窗）
        props: {
            multiple: {
                type: Boolean,
                default: false,
            },
            hasInput: { // 是否带输入框
                type: Boolean,
                default: false
            },
            productData: {
                type: Array
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            initData: {
                type: Object,
                required: true,
                default: {
                    channelCode: '',
                    sourceType: '',
                    statusId: '',
                    isGift: false
                }
            }
        },
        components: {},
        data() {
            return {
                show: false,
                title: '选择商品',
                label: '', // 输入框绑定值
                ruleForm: {
                    nameLike: '',
                },
                tableData: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    columnData: [],
                },
                selection: [],
                loading: false,
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token,
                sourceId: state => state.token.sellerId
            }),

        },
        methods: {
            showDialog() {
                this.show = true;
                this.ruleForm.nameLike = '';
                this.clickQuery();
            },
            closeDialog() {
                this.show = false;
            },
            clickQuery() {
                this.tableData.currentPage = 1;
                this.queryListFun();
            },
            queryListFun() { // 查询分类下的场景
                let params = {
                    rowSize: this.tableData.pageSize,
                    startRow: this.tableData.currentPage,
                    orders: this.tableData.orders,
                    columns: this.tableData.columns,
                    nameLike: this.tableData.nameLike,
                    sourceId: this.sourceId,
                }
                let newparams=Object.assign(params,this.initData)
                this.loading = true;
                querygdProductList(newparams).then(res => {
                    this.tableData.columnData.splice(0, this.tableData.columnData.length);
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (isArray(data.data) && data.data.length) {
                            // this.tableData.columnData.push(...data.data);
                            this.tableData.columnData = data.data.map((i) => {
                                return {
                                    ...i,
                                    choosed: false
                                }
                            })
                            this.productData.forEach((k) => {
                                for (let i = 0; i < this.tableData.columnData.length; i++) {
                                    if (k.id == this.tableData.columnData[i].id) {
                                        this.tableData.columnData[i].choosed = true
                                    }

                                }
                            })
                            this.tableData.total = data.total;
                        } else {
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            handleCurrentChange(val) {
                this.tableData.currentPage = val;
                this.queryListFun();
            },
            handleSizeChange(val) {
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
                this.queryListFun();
            },

            selectThis(row) {
                row.choosed = true
                this.selection.push(row)

            },
            submitchoosed() {
                // console.log(this.selection);

                this.$emit('update:productData', this.selection);
                this.closeDialog();
            },
            unselectThis(row) {
                row.choosed = false
                this.selection.splice(row.$index, 1)
            }
        }
    }

</script>

<style lang="scss" scoped>
    .select-scene {
        // display: inline-block;
        vertical-align: middle;
        // float: left;
    }

    .input-wrap {
        position: relative;
        height: 35px;
        line-height: 35px;

        /deep/ {
            .el-input {
                float: left;
            }

            .del-icon {
                position: absolute;
                top: 8px;
                right: 10px;
                cursor: pointer;
            }
        }
    }

</style>
<style lang="scss">
    .el-dialog__body {
        padding: 15px 20px 30px 20px;
    }

</style>
